10 Things Need To Know About React JS

#Is React JS a Frame Work?

React JS is not a frame work basically it is a library. People can made web application using React JS library. But before create any application we have to know how React JS work. Basically if we want to make a application first of all we have to make components. In those components we have to deal with our own logic for crate a beautiful application. We can made application using plane JS components or JSX.

#JSX

The JSX syntax looks like HTML. But it is not HTML and it is a string of JavaScript. Basically it is a syntax extension of JavaScript. Example : <h1>Hello AKash<h1>. The main task of JSX is creating element for react. In JSX we can work with function and variables.

#VIRTUAL DOM

The meaning of Virtual Dom is Virtual Document Object Model. It is a concept of programming. In this User Interface kept in a memory. The User Interface synced with the real DOM by a library(ReactDOM). It is like a pattern . In our react project we write many codes in html or css and the whole code is called DOM for JavaScript. It is actually associate with react elements.The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

#PERFORMANCE OPTIMIZATION TECHNIQUE

  1. Using production mode flag in webpack
  2. For avoid additional HTML element wrappers use React.Fragments
  3. Using Immuluate data structure
  4. We should avoid as key for map
  5. We can use dev tool for optimize application
  6. Avoid props in initial state

#JAVASCRIPT IN REACT

We can use JavaScript in our react app for this we have to look on code example for how to use.

Code: function welcome (props){

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name=”Anik Khan” />;
ReactDOM.render(
element,
document.getElementById(‘root’)
);

#PROP TYPES IN REACT

Prop is a specific js type .There are many props types available in react. Now i will show some prop types for better understanding :

1.optionalArray: PropTypes.array,
2.optionalBool: PropTypes.bool,
3.optionalFunc: PropTypes.func,
4.optionalNumber: PropTypes.number,
5.optionalObject: PropTypes.object,
6.optionalString: PropTypes.string,
7.optionalSymbol: PropTypes.symbol

#SEND DATA FROM PARENT TO CHILD COMPONENT

There are lots of ways where we can send data from parent to child component. But now i will tell about some processes. Frist process, We have to declare a context api state for our data to send child component. When we set our data into context api state then we can share this context to our child component and child component can use those datas. Second process, we have to send data to child component using map . For get data we have to use props for destructure data and then we can use those datas.

#TERNARY OPERATOR IN REACT

Ternary operator is very useful for ract application for the user. Its like opposite version of IF and ELSE . Ternary operator code example :

<input type=”button” value={`${showTab ? ‘Hide’ : ‘Show’} Tab`} onClick={handleToggle}></input>

here in curly bracket we see IF showTab occur then get output Hide Else get output Show .

#STATE IN REACT

By using state in react app we can reduce repetitive code. For that our code will be more efficient for getting or sending data . How we can declare state ? well now i am showing to you. Example: anik [rasel, setRasel] = useState(); By using this format we can declare a useState easily. Where we can set data to rasel and setRasel used for update the data of rasel.

#DECLARTIVE IN REACT

We can easily use declarative components in our react app . For this we can easily identify the name of the part of our react app like: <HEADER></HEAADER>, <SECTION></SECTION>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store