React Stateless Functional Components example

We have known how to define a React Component in the post React Components example. There is a simpler way to do this which is called stateless functional components. Remember that we can only use this method for components that don’t have state.

Related Posts:
React Component Props example
React State example
React Note Application – React props and state example

I. How to

With component that we created from the class:

We can define it in another way (stateless functional component way):

We can see that the stateless component is just a function. There is no this keyword.

II. Practice

1. Overview

We will build a React Note Application like the post: React Note Application – React props and state example using Stateless Functional Components wherever we can:

react-note-app-goal

For setting up environment and project files, please visit: React Components example – Setup Project.
To run this example, we just need to override app.js file.

2. app.js

3. Run & Check results

– Point cmd to project folder, then run cmd: yarn install.
node_modules folder and yarn.lock file now appear in our project folder:

react-example-after-yarn-install

– Run cmd: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch
Now, a new app.js file appear in public/scripts folder, code insides this file was generated automatically (and also update automatically whenever we modify and save src/app.js).

– Open new cmd, point to Project folder, run cmd: live-server public.
Result in Browser:

react-note-app-result

III. Source code

ReactStatelessFuncComponents

By JavaSampleApproach | March 29, 2018.

Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*