react js projects code example

Example 1: react project ideas

/* Answer to: "react project ideas" */

/* Here are 20 great ideas!
  1. Quiz Builder - Quiz-crafting tool
  2. Music Player - https://developer.spotify.com/web-api/
  3. Meme Generator - https://api.imgflip.com/
  4. Insta Ratio - Follower/Following Ratio on Instagram - https://www.instagram.com/developer/
  5. Tweetdeck - See multiple feeds from different accounts at once on Twitter - https://dev.twitter.com/rest/public
  6. Goofy Yelp - Yelp, but backwards, find the worst rated restaurants - https://www.yelp.com/developers/documentation/v3
  7. Event Finder - Allow users to post upcoming events - https://www.eventbrite.com/developer/v3/
  8. Custom Forum - Full forum board
  9. My Medium - Just a https://medium.com/ clone
  10. YouTube Direct - Make a better YouTube - https://developers.google.com/youtube/
  -- These 10 ideas are from: https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831
  -- 10 more amazing ideas can be found:
  https://www.instamobile.io/react-native-tutorials/react-native-app-ideas-beginners/
  (You can also press the link in the source to go to ^^)
*/

Example 2: professional react projects

/* 5 React projects you should build
 
1.Build a Social Media App    https://www.freecodecamp.org/news/content/images/2020/01/social-media-cropped-min.gif
2.Build an E-Commerce App     https://www.freecodecamp.org/news/content/images/2020/01/ecommerce-cropped-min.gif
3.Build an Entertainment App  https://www.freecodecamp.org/news/content/images/2020/01/entertainment-cropped-min.gif 
4.Build a Messaging App       https://www.freecodecamp.org/news/content/images/2020/01/messaging-cropped-min.gif 
5.Build a Productivity App    https://www.freecodecamp.org/news/content/images/2020/01/productivity-cropped-min.gif 

ref : https://www.freecodecamp.org/news/5-react-projects-you-need-in-your-portfolio/ 
 */

Example 3: reactjs basic example

// -------// -------// -------
// index.js
// -------// -------// -------

const user = {
  name: "zidane",
  email: '[email protected]'
};

const element = <h1> {user.name} exist email: {user.email} </h1>;

const element2 = 
  <div  className="heading"> 
     <h1> {user.name}  </h1>
     <h1> {user.email} </h1>
  </div>;

var numbers = [1,2,3,4];
var doubleNumbers = numbers.map(function(num){
  return num * 2 + "; ";
})

var doubleNumberArrowFunction = numbers.map((num)  => num * 3 + "; ");

var element3 = 
  <div>
    Double numbers: {doubleNumberArrowFunction}
  </div>;

ReactDOM.render(
  element3,
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>,
  document.getElementById('root')
);

// -------// -------// -------
// ------- index.css ------
// -------// -------// -------
.heading {
  padding: 10px;
  color: white;
  background-color: green;
}