ReactJs & APIs

 https://newsapi.org/   click on get API key

Json web tokens (JWT) - security features for APIs - good example is Twitter or Facebook


https://www.linkedin.com/learning/react-working-with-apis-22613064/initialize-a-react-project?autoSkip=true&resume=false

CALLING APIS WITH REACT

Chrome or Firefox developer tools - Ctrl + Shift + I
React developer tools
Postman is great for testing. (Postman.com)
materializecss.com  for cards

------------------------------------------------

class News extends Component {
  constructor(props) {
     super(props);
     this.state = { news : [], };
  }

  componentDidMount() {
     const url = 'xxxxxxxxxxxxx=${process.env.REACT_APP_API}'
     fetch(url)
         .then ((response) => {
             return response.json();
         })
         .then ((data) => {
             this.setState({
                  news: data.articles
             });
         })
         .catch((error) => console.log(error));
  }

  renderItems() {
    return this.props.items.map{(item) => {
        <NewSingle key={item.url} item={item} />
    })
  }

  render() {
    return  (
       <div className='row'>
          {this.renderItems()}
       </div>
    }
  }
}

export default News;
------------------------------------------------

fetch

------------------------------------------------

create .env file at top level for environment
  REACT_APP_API=xxxxxxxx

------------------------------------------------