React Tooling and JSX (React article 01)

01. npm / yarn

npm init -y

By using npm once you create package.json file that will be loaded when your module is required. This is kind of manifest for your project that you can define dependencies and task that need to happen.

02. Prettier (https://prettier.io/)

npm install -D prettier

An opinionated code formatter. After install you can format code inside App.js run this command. This will format all the data inside App.js.

npx prettier App.js --write

Furthermore you can add more configuration to your editor when press save and then code is formatted.

03. ESLint

Prettier is going to handle formatting but is't going to handle stylistic choices about your code and isn't handle like you must use '===' vs '==' like that.

This where ESLint come to playground it handle more like stylistic type of code base. It track like variables that are not using, JavaScript difference like '===' vs '=='

alternative to eslint are jslint(old and not configurable so not helping for react) and jshint (has more rules and more active but still not very configurable like adding new rules so not helping for react)

Even better you can add git hooks : If anyone tries to commit to your code base it will run eslint/prettier to make sure that they are gonna pass before they pass there code to production. There is a library called husky(https://github.com/typicode/husky) this help you do that.

04. web-pack Vs Parcel

These are JavaScript module bundlers. Main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 

web-pack : If it is big project or will maintain for really long time you must chose web-pack there are lot of ways to configure it and also you can write your own plug ins using web-pack.

Parcel (https://parceljs.org/): is similar to web-pack but it pretty much zero configuration. You can start things and finish them quickly.

~Lets use Parcel

npm install -D parcel-bundler

1. You need to add dev Script that's is, there not gonna be more additional configuration that we need here because parcel knows out of the box what to do most type of front end files. It Knows how to handle flows, Knows how to handle TypeScript, Knows how to handle JSX, Knows how to handle sass, Knows how to handle less etc.

These are the react tooling help for set up a project, next we'll gonna explore on JSX

Why JSX?

In here by using React we can writing JavaScript to generate HTML but this is hard. This is not readable when you write more code.

It is easy to use JSX. This is how you can use it.

const element = <h1>Hello, world!</h1>;

This funny tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

above code easy transpired in to this code using JSX code.

This compare how your code gets more simpler when you use using JSX.

Without JSX

with JSX

Congrats! You now have a Understanding of the Tooling and JSX concepts in React. Lets go see the React Rendering Data and React Routing in next tutorial.