Can You Learn React Without Knowing Javascript

Do y'all know enough javascript before jumping into React??
Do you know how to apply the map() method to loop through an array in javascript or ReactJS??
If you are learning React and you go stuck on these kinds of above questions then definitely you are doing mistakes in your learning process. There is no doubt that ReactJS is the about popular library among frontend developers and its popularity is continuously increasing day by day. The website running on ReactJS looks beautiful and near of the beginners in development become attracted to ReactJs (adult by Facebook) likewise but a common mistake that a lot of developers and experienced people make is jumping directly into ReactJS (or some other library and framework) without knowing the prerequisites. If you volition directly go to the React you lot will face a lot of problems while learning this library and in interviews as well.

You will get stuck during your interview if you will be asked some questions related to ES6, JSX, Boom-boom, Package managing director, basic javascript, or some other fundamental concepts. Nosotros are going to hash out some prerequisites and some basic concepts that you should know before you jump to the React. These basic concepts will also aid you to pick up another frameworks and libraries of javascript in the future.

ane. HTML and CSS

Every front-end programmer starts their journey with HTML and CSS. And then before you lot get-go learning to react you should have a practiced command of writing HTML and CSS. You should know how to write semantic HTML tags, how to write CSS selectors, how to use classes, how to implement a CSS reset, box model, how to reset to edge-box, flexbox, how to write responsive web applications including media queries, and how to build a frontend application using HTML and CSS.

2. JSX (Javascript XML) & Boom-boom

In React you will work with JSX that looks like HTML and you can consider it like HTML-flavored JavaScript. It is the easiest style to add HTML code inside javascript or y'all can say it is the extension of the Javascript language syntax. You should take a complete agreement of what is JSX before you kickoff learning React. Just take a wait at the code below…

javascript

const h1 = <h1>Hello Programmers</h1>;

When you lot will wait at the to a higher place code for the showtime time information technology might be confusing for you lot. Is it Javascript? or HTML? or something else? If y'all will run the above code in HTML file it won't run merely the lawmaking contains HTML tag <h1>Hello globe</h1>. Basically, JSX extends the ECMAScript so that XML/HTML-similar text tin co-exist along with JavaScript react code. Empathize it from the moving-picture show and lawmaking given below…

javascript

var MyComponent = React.createClass({

render : function () {

return (

<h2>Hello Programmers!</h2>

);

}

});

ReactDOM.render(<MyComponent/>, document.getElementById( 'content' ));

Another thing you lot should know about is Babel. Babel is a compiler that transforms HTML-like text establish in JavaScript files into standard JavaScript objects. Information technology takes features from the latest version of javascript or ECMAScript 2015+ (ES6+) and brings them downwards to ES5 or regular javascript. Make certain that your concept needs to be clear about JSX and Babel if you lot want to go with React. Check how Boom-boom does the conversion from the link here.

3. Fundamentals of Javascript and ES6

No matter what… you tin't get better at React if your javascript cardinal is not clear. During the interviews, it is i of the essential skills to larn earlier moving to react. Javascript is 1 of the almost confusing languages for developers and it ignores small-scale errors that can create a trouble in your project if you won't notice information technology before. So make sure that you first articulate your basic concept about javascript and so you lot motion to the advanced version of ECMAScript5 and ECMAScript6. Some of the topics are given below but brand sure that yous explore equally much equally you tin can and build some projects likewise for in-depth noesis in javascript.
Call back that building the basic foundation of javascript will help you to learn any framework but if the concept won't be clear you will get stuck in any javascript framework. Also, the interviewer volition check your fundamentals in javascript first before moving to the React.

• Commencement with variables, numbers, boolean, string,south and brand your concepts clear about other very bones fundamentals. Make some small app on that like a reckoner to meet how things work together.
• Larn about operators, conditionals, functions, loops, javascript keywords, array, objects, and other fundamentals.
• Event treatment, DOM manipulation, and how 'this' keyword works totally different in javascript (which is confusing for most of the developers).
• Higher-guild office, callback function, arrow function, state (how country and setState() office works) scope, grade & constructors, extends and inheritance, map, reduce, filter, promises, modules, closures, const, let (difference between var, allow and const) and other features of ES5 and ES6.

four. Package Manager (Node + Npm)

When you volition exist working with ReactJS yous'll have to install many, smaller software packages. Package in javascript contains all the files needed for a module and modules are the javascript libraries that tin can exist included in the Node project. Packages incorporate two things…package.json files + js files. To install these packages you need a good installer that tin help y'all to download and install software packages hands without worrying near the dependencies. Here NPM (Node parcel managing director) plays a part and helps you to install and keep rails of javascript software. Y'all tin employ NodeJs or Yarn to manage these software packages. You tin install NPM by installing Node.js. When yous install Node.js, NPM will install automatically.
So earlier moving to React, yous should have a solid understanding NPM (Node package manager) registry and how to install packages using NPM. NPM registry keeps track of the file that has been submitted. Anybody can submit these files (packages or modules). In curt NPM registry is the identify where developers can go and get the software to build software.
Let's suppose a person has written some javascript file that is really useful. He/she thinks that the other people might use it and so he/she pushes it to the NPM registry. Somebody else tin can get information technology from the NPM web registry and download information technology for their ain purpose. Learn about the NPM more than from GeeksforGeeks.

5. Git and CLI (Command Line Interface)

Git (version control) is another must-take skill a developer should have to store their project on GitHub, Bitbucket, and GitLab (Code hosting platform). It helps developers to work and collaborate with each other and information technology allows them to track and host different versions of project files. Yous should have adept knowledge that how Git and these code hosting platforms work. Developers utilize the command of Git to track the version of your files, so larn how to use all the commands such every bit push, pull, add, commit, etc. Also larn near merging, branching, handling merging conflicts, etc.
Everything in React you will be doing with the help of CLI (Command-line interface). Installing packages, using NPM, creating a react app, running react application, and a lot of things so you lot really need to make a addiction of using CLI. Beneath is an instance of running a react application using CLI.

huntfamenig.blogspot.com

Source: https://www.geeksforgeeks.org/top-5-skills-you-must-know-before-you-learn-reactjs/