A Quick Look into (REACT.JS). What is React JS
Today we are going to learn about what React JS is.
React.Js
React.js is a JavaScript library built by Meta (formerly Facebook) for building user interfaces.
It’s based on components, which help us to reuse your code without duplicating it. It has an HTML look-alike syntax known as JSX.
Prerequisites
To start with React.js, we need to have a good knowledge of HTML, CSS, and JavaScript with some advanced topics that include:
☛Classes
☛Objects & arrays
☛ES6 functions
☛Basic understanding of npm
This is the least minimum we need to know to start working on React.js.
Initiate a Project
React.js uses webpack, babel, and other npm packages to compile the source code. Setting up a project from scratch is a lot of work, but an easy solution to this is to use an npm package, create-react-app that sets up everything for us.
npx create-react-app cd my-app
npm start
Folder Structure
When we use the npm package, it creates a folder with some files (as shown in the image). The src file is the source folder where we add our files. The public folder has the root HTML file and some configuration (e.g. manifest.json)
The JSX
If we go to src > app.js, you’ll see a function with a return statement and a syntax that looks like HTML called JSX. Anything that the function returns here will be shown on the screen. The JSX is self-explanatory here.
Start the Server
We can start the server with a simple npm command that is preconfigured, thanks to the create-react-app.
By default, the URL is localhost:3000.
> npm start
If you have any confusion about anything. Just me on INSTAGRAM or you can email me at codeculturepro@gmail.com.
