[PART 1] ReactJS Fundamentals
Let us look at the few important elements of ReactJS before diving deeper into projects and their concepts.
What is ReactJS?
ReactJS is a javascript library that helps us to build modern applications. Unlike AngualrJS, React comes with its challenges since it is just a library rather than a framework.
Why React is so popular over Angular?
The concept and usage of virtual DOM is the most significant difference between the two. ReactJS internally compares the real DOM with the virtual DOM and updates the changes only. It won't load the entire page every time rather it only updates the pages with the changes that happened.
React doesn't guarantee the changes instantly since React updates the DOM elements batch-wise. There are ways to ensure that react updates before doing other operations. let's look at those in the future article.
What are the prerequisites for ReactJS?
- HTML and CSS basics
- Javascript ES6
What is JSX?
JSX is simply a javascript inside an HTML and ReactJS will internally do the transformation to render onto the screen.
const Tutorials = (props) => { return <h1>Welcome to ReactJS</h1> };export default Tutorials;
As you can see in the above snippet, HTML Is embedded inside the javascript function. This is the basic JSX example.
One of the major rules that need to be followed while writing JSX is having only one parent tag. Let us see another example to understand this.
const Tutorials = (props) => {
return (
<h1>Welcome to ReactJS</h1> <h1>I Love Learning ReactJS<h1>
)};export default Tutorials;
The above example throws an error since JSX doesn't have one parent element. Let's wrap a div around the HTML elements to fix the above error.
const Tutorials = (props) => {
return (<div>
<h1>Welcome to ReactJS</h1> <h1>I Love Learning ReactJS<h1>
</div>)};export default Tutorials;
Now the code compiles since we have only one parent tag i.e div tag. So it is important to have a single parent tag in reactJS else react will throw an exception while transforming JSX.
ReactJS is all about building components and the reusability of the components. In order to understand more about this, Let’s build a project from the scratch.
Requirement:
- NodeJS should be installed in the local system.
- VS code is highly recommended because of its extension and ease to use.
Steps to run your first React Project
- Open the folder created for the project in VS code editor.
- Goto terminal in VS code and go to the folder created for the project(By default this will be in the folder if you have only one project)
- execute the command in the terminal
npx create-react-app my-appand my-app is the project name and you can mention any name depending upon the requirement likenpx create-react-app <YOUR PROJECT NAME> - Go to the folder created by react by executing
cd my-app(cd <YOUR PROJECT NAME>) - To run the react project, Just execute
npm start
Let’s look at carefully the project structure of the react
- node_modules -> This is where all the node modules(Dependency) get downloaded which would be used in the project.
- package.json -> This is where all the dependencies required for the project will be mentioned.
- Public Folder -> This has a few initial images and a few other files but it has a very important file index.html -> This is where the project starts up.
- Src -> This is where all the components will be built in the future and one particular file will create DOM elements with the help of ReactDOM by calling index.html root element ID(‘root’) to display it on the page. So index.js plays an important role and the app.js file content will be rendered in the UI.
